<!--suppress ALL -->
<template>
    <div class="loginBox">
        <table border>
            <tbody>
            <tr>
                <td>
                    <img style=" position: absolute; width: 50%; margin-left: 400px; border: 1px solid red;" src="/assets/svg/login_noise_space.svg"/>
                </td>
            </tr>
            <tr>
                <td>
                    <div style="opacity: 0.4; width: 100%; height: 100vh;" >
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="w100" style="z-index: 1; position: absolute; margin-top: -70%;">
            <div class="backBtn right center mcp" style="margin-right: 40px; margin-top: 30px;">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="8" height="13" viewBox="0 0 8 13"><g transform="matrix(0,1,-1,0,8,-8)"><g><path d="M8 0C8 0 8 0 8 0L10.599999904632568 0C10.599999904632568 0 10.599999904632568 0 10.599999904632568 0L10.599999904632568 2.6666667461395264C10.599999904632568 2.6666667461395264 10.599999904632568 2.6666667461395264 10.599999904632568 2.6666667461395264L8 2.6666667461395264C8 2.6666667461395264 8 2.6666667461395264 8 2.6666667461395264Z" fill="#FFFFFF" fill-opacity="1"/></g><g><path d="M10.599999904632568 2.6666667461395264C10.599999904632568 2.6666667461395264 10.599999904632568 2.6666667461395264 10.599999904632568 2.6666667461395264L13.199999809265137 2.6666667461395264C13.199999809265137 2.6666667461395264 13.199999809265137 2.6666667461395264 13.199999809265137 2.6666667461395264L13.199999809265137 5.333333492279053C13.199999809265137 5.333333492279053 13.199999809265137 5.333333492279053 13.199999809265137 5.333333492279053L10.599999904632568 5.333333492279053C10.599999904632568 5.333333492279053 10.599999904632568 5.333333492279053 10.599999904632568 5.333333492279053Z" fill="#FFFFFF" fill-opacity="1"/></g><g><path d="M13.199999809265137 5.333333492279053C13.199999809265137 5.333333492279053 13.199999809265137 5.333333492279053 13.199999809265137 5.333333492279053L15.799999713897705 5.333333492279053C15.799999713897705 5.333333492279053 15.799999713897705 5.333333492279053 15.799999713897705 5.333333492279053L15.799999713897705 8.000000238418579C15.799999713897705 8.000000238418579 15.799999713897705 8.000000238418579 15.799999713897705 8.000000238418579L13.199999809265137 8.000000238418579C13.199999809265137 8.000000238418579 13.199999809265137 8.000000238418579 13.199999809265137 8.000000238418579Z" fill="#FFFFFF" fill-opacity="1"/></g><g><path d="M15.800000190734863 2.6666667461395264C15.800000190734863 2.6666667461395264 15.800000190734863 2.6666667461395264 15.800000190734863 2.6666667461395264L18.40000009536743 2.6666667461395264C18.40000009536743 2.6666667461395264 18.40000009536743 2.6666667461395264 18.40000009536743 2.6666667461395264L18.40000009536743 5.333333492279053C18.40000009536743 5.333333492279053 18.40000009536743 5.333333492279053 18.40000009536743 5.333333492279053L15.800000190734863 5.333333492279053C15.800000190734863 5.333333492279053 15.800000190734863 5.333333492279053 15.800000190734863 5.333333492279053Z" fill="#FFFFFF" fill-opacity="1"/></g><g><path d="M18.399999618530273 0C18.399999618530273 0 18.399999618530273 0 18.399999618530273 0L20.999999523162842 0C20.999999523162842 0 20.999999523162842 0 20.999999523162842 0L20.999999523162842 2.6666667461395264C20.999999523162842 2.6666667461395264 20.999999523162842 2.6666667461395264 20.999999523162842 2.6666667461395264L18.399999618530273 2.6666667461395264C18.399999618530273 2.6666667461395264 18.399999618530273 2.6666667461395264 18.399999618530273 2.6666667461395264Z" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>
                <span style="margin-left: 10px; margin-top: -3px;">返回</span>
            </div>
        </div>
        <img src="assets/svg/login_logo.svg" style="position: absolute; margin-top: -68%; margin-left: 34px;"/>
        <div style="z-index: 2; position: absolute; margin-left: 50%; margin-top: -55%">
            <div class="loginPanel">
                <span style="font-size: 25px;">用户登录</span><br/>
                <div style="margin-top: 20px; margin-bottom: 20px;">
                    没有账号？
                    <div style="display: inline-block;" class="themeFontColor">立即注册</div>
                </div>
                <div style="border-bottom: 1px solid gray; margin-bottom: 20px;"></div>
                <div>
                    <div class="inline">
                        <div style="font-size: 20px;" class="mcp" @click="checkLoginType(1)">短信登录</div>
                    </div>
                    <div class="inline">
                        <div style="font-size: 20px; margin-left: 10px;" class="mcp" @click="checkLoginType(2)">账号登录</div>
                    </div>
                    <br/>
                    <svg :class="actClass" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="58" height="12" viewBox="0 0 58 12"><g><path d="M36.9149,7.0374L57,7.0374L57,5.0374L37.3335,5.0374L32.6649,0.298219L31.1132,0.45646299999999995L25.2654,9.48713L20.455,5.28433L19.7971,5.0374L1,5.0374L1,7.0374L19.4218,7.0374L24.8192,11.7531L26.3165,11.5435L32.114599999999996,2.58949L36.2025,6.73918L36.9149,7.0374Z" fill-rule="evenodd" fill="#FFD210" fill-opacity="1"/></g></svg>
                </div>
                <div style="margin-top: 20px;">
                    <div v-if="actClass == 'sms'">
                        手机号码<br/><br/>
                        <input maxlength="20" class="input_account" style="width: 97%;" placeholder="手机号码可免注册直接登录"/>
                        <br/><br/>
                        短信验证码<br/><br/>
                        <input maxlength="20" class="input_account" style="width: 97%;" placeholder="手机短信验证码"/>
                        <div class="themeFontColor mcp" style="position: absolute; margin-top: -42px; margin-left: 73%;">获取验证码</div>
                    </div>
                    <div v-if="actClass == 'account'">
                        账号<br/><br/>
                        <input maxlength="20" class="input_account" style="width: 97%;" placeholder="请输入手机账号"/>
                        <br/><br/>
                        密码<br/><br/>
                        <input maxlength="20" :type="eye == 'close' ? 'password' : ''" class="input_account inputPassword" style="width: 97%;" placeholder="请输入账号密码"/>
                        <img class="mcp" @click="eye = 'open'" v-if="eye == 'close'" src="assets/svg/login_eye_close.svg" style="position: absolute; margin-top: -42px; margin-left: 480px;"/>
                        <img class="mcp" @click="eye = 'close'" v-if="eye == 'open'" src="assets/svg/login_eye_open.svg" style="position: absolute; margin-top: -42px; margin-left: 480px;"/>
                    </div>
                    <div style="margin-top: 20px;">
                        <svg style="margin-left: 15px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="8" height="8" viewBox="0 0 8 8"><g><g transform="matrix(0.7071067690849304,-0.7071067690849304,0.7071067690849304,0.7071067690849304,-2.8284270763397217,1.1715729236602783)"><path d="M0 4C0 4 0 4 0 4L5.656854152679443 4C5.656854152679443 4 5.656854152679443 4 5.656854152679443 4L5.656854152679443 9.656854152679443C5.656854152679443 9.656854152679443 5.656854152679443 9.656854152679443 5.656854152679443 9.656854152679443L0 9.656854152679443C0 9.656854152679443 0 9.656854152679443 0 9.656854152679443Z" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>
                        <span style="margin-left: 10px;">未注册手机号，将自动注册 <span class="themeFontColor">NoiseSpace</span> 账号注册代表你已同意</span>
                    </div>
                    <div>
                        <button class="loginBtn">立即登录</button>
                    </div>
                    <div style="margin-top: 30px;">
                        我已同意 <span class="themeFontColor mcp">[NoiseSpace用户协议]</span> 和 <span class="themeFontColor mcp">[NoiseSpace隐私政策]</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "LoginPanel",
        data(){
            return {
                // 登录类型 1=短信 2=账号
                loginType: 1,
                actClass: 'account',
                eye: 'close'
            }
        },
        methods: {
            checkLoginType(type){
                this.loginType = type;
                this.actClass = type == 1 ? 'sms' : 'account';
            },
            changeEye(type){
                this.eye = type;
            }
        }
    }
</script>

<style scoped>
    .loginBox{
        background-image: url('/assets/bgc/loginBgc.png');
        background-size: cover;
    }
    .loginPanel{
        width: 522px;
        height: 636px;
        background: rgba(19, 19, 19, 0.9);
        backdrop-filter: blur(38.08px);
        padding: 30px;
    }
    .input_account{
        border-radius: 8px;
        background: rgba(65, 65, 65, 0.5);
        backdrop-filter: blur(27.2px);
        height: 50px;
        padding-left: 10px;
        color: gray;
        font-size: 14px;
    }
    .sms{
        margin-left: 10px;
    }
    .account{
        margin-left: 100px;
    }
    .loginBtn{
        width: 522px;
        height: 50px;
        margin-top: 50px;
        font-size: 18px;
        border-radius: 8px;
        background: #FFD210;
    }
    .check{
        position: absolute;
        left: 0px;
        top: 1px;
        width: 4.62%;
        height: 90%;
        opacity: 1;

        /* 自动布局 */
        display: flex;
        flex-direction: undefined;
        justify-content: undefined;
        align-items: undefined;
        padding: NaNpx;

        box-sizing: border-box;
        border: 1px solid #FFD210;
    }
    .backBtn{
        border-radius: 12px;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(27.2px);
        width: 126px;
        height: 54px;
    }
    .inputPassword::-ms-reveal{
        display: none;
    }
</style>
